<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="shiro"  uri="http://shiro.apache.org/tags" %>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商户结算</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">
  </head>
  <style>
    .companyname{
      height: 30px;
      font-size: 15px;
      line-height: 30px;
      padding-left: 10px;
    }
    .nocompany,.yescompany{
      /*border: 1px solid #ddd;*/
      margin-bottom: 10px;
    }
    .modular{
      font-size: 25px;
      /*font-weight: bold;*/
      color: white;
    }

    .able-outer-container,.able-select-area {
      width: 370px;
      height: 100px;
    }
    .able-outer-container {
      overflow: hidden;
    }
    .able-inner-container {
      overflow-x: hidden;
      overflow-y: scroll;
    }

    .able-inner-container::-webkit-scrollbar {
      display: none;
    }
    .mod-1{
      position: relative;
      top: 5px;
      left: 20px;
      border: 1px solid #ddd;
      width: 16%;
      height: 700px;
      float: left;
    }
    .rec{
      min-height: 450px;
      border: 1px solid #ddd;
      float: left;
      border-radius: 10px !important;
      background-color: #f6f6f6;
    }
    .user{
      width: 100%;
      height: 28px;
      line-height: 28px;
      font-size: 15px;
    }
    .success{
      text-align: center;
      font-size: 25px;
      line-height: 80px;
      color: green;
    }
    .money{
      height: 45px;
      line-height: 45px;
      font-size: 14px;
      background-color: #f6f6f6;
      text-align: center;
    }
    .on{
      background-color: #f5f5f5;
    }
    .portlet.light > .portlet-title > .caption > .caption-subject {
      font-size: 18px;
    }
    .aa{
      height: 40px;
      width: 800px;
      background-color: red;
      position: absolute;
      z-index: 99;
    }
    .merchant-Msg{
      position: relative;
      top: 5px;
    }
    .able-a-merchant{
      position: relative;
      margin-top: 5px;
      color: #2488CC;
    }
  </style>
  <body>
  <div class="page">
    <!-- Main Navbar-->
    <jsp:include page="header.jsp"></jsp:include>
    <div class="page-content d-flex align-items-stretch">
      <!-- Side Navbar -->
      <jsp:include page="left.jsp"></jsp:include>
      <div class="content-inner">
        <!-- Page Header-->
        <header class="page-header">
          <div class="container-fluid">
            <h2 class="no-margin-bottom">账户结算</h2>
          </div>
        </header>
        <a name="top" hidden></a>
        <div class="content-box" style="background-color: white;height: 95%">
          <div class="mod-1">
            <div  class="able-outer-container">
              <div class="able-inner-container">
                <div class="able-select-area"  >
                  <div id="able-merchant" style="position: relative;left: 10%; font-size: 15px;">

                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-10 re" style="display:block;background-color: white;width: 80%;margin-left: 2.3333%;position: relative;left: 16%;top:5px;border: 1px solid #ddd;height: 700px">
            <div class="portlet light" style="position: absolute;width: 98%">
              <div class="portlet-title" style="margin-bottom: 0;font-size: 18px;">
                <div class="caption" style="font-weight: bold;color: #2488CC;">
                  结算账户 : <span class="caption-subject theme-font bold" id="headName"></span>
                </div>
                <div class="caption col-md-6"  style="float: right;font-size: 14px;padding-bottom: 0;text-align: right;margin: 0 auto;">
                  <div class="col-md-4">
                    账户状态 :<span id="state"></span>
                  </div>
                  <!--<div class="col-md-6" style="float: right;position: relative;top: -20px;">
                      账户编码 : <span style="margin-left: 15px" id="code"></span>
                  </div>-->
                </div>
              </div>
              <div class="singlesettlement col-md-12">

              </div>
              <input id="nowtime" value="" name="nowtime" type="hidden">
              <input id="beforetime" value="" name="nowtime" type="hidden">
              <div class="portlet-body" style="padding: 0">
                <div class="col-md-12" style="margin-bottom: 20px">
                  <div class="col-md-3 money"  style="margin-left: 25%; float: left;" >预期返还金额(元) : <span class="return" id="return"></span></div>
                  <div class="col-md-3 money"   style="width: 25%;position: relative;left: -25%;float: right">预期追缴金额(元) : <span class="debt" id="debt"></span></div>
                </div>
                <div class="col-md-12">
                  <div class="col-md-12" style="margin-bottom: 10px">
                    <div style="position: relative;top: 50px;height: 30px">
                      <div style=" float: left;position: relative;left: -50%;font-size: 14px;font-weight: bold;">
                        账户名称 : <span id="contentName"></span>
                      </div>
                      <div style=" float: left;position: relative;left: -25%;font-size: 14px;font-weight: bold;">
                        结算账单 : <span  id="date"></span>
                      </div>
                      <input type="hidden" id="merchantId">
                      <div class="" style="float: right;position: relative;right:-20% "> <button class="btn  btn-sm" onclick="printout()">打印</button></div>
                    </div>
                  </div>

                  <div class="col-md-12" style="margin-bottom: 10px;position: relative;z-index: 0;top: 50px" id="settlement">
                    <table id="print-content" border="1" width="100%"  cellpadding="0" cellspacing="0" style='border-collapse:collapse;table-layout:fixed;'>


                    </table>
                  </div>
                  <!--<div class="aa"></div>-->
                  <div class="col-md-12" style="margin-bottom: 10px;position: relative;top: 50px;width: 50%">
                    <div class="caption"  style="font-size: 14px;padding-bottom: 0;opacity: 0.5">
                      电费 : <span id="elec_rate"></span>元/KWh&nbsp;&nbsp;&nbsp;
                      水费 : <span id="water_rate"></span>元/KWh &nbsp;&nbsp;
                      燃气费 : <span id="gas_rate"></span>元/KWh
                    </div>
                  </div>
                  <div class="col-md-12" style="margin-bottom: 10px;position: relative;top:50px;">
                    <div class="caption"  style="font-size: 14px;padding-bottom: 0;opacity: 0.5">
                      <span>提示 : 结算将清空账户余额，账户将进入停用状态，此界面显示为当前账单仅作为参考，请已实际情况为准！</span>
                    </div>
                  </div>
                  <div class="col-md-12" style="margin-bottom: 10px;position: relative;top:50px;">
                    <div class="caption"  style="font-size: 14px;padding-bottom: 0;font-weight: bold">
                      <div class="col-md-6" style="padding-left: 0">
                        <div class="col-md-8" style="padding-left: 0; float: left;" >
                          <input type="password" placeholder="请输入操作密码完成结算" maxlength="2000"
                                 name="code" value="" class="form-control" id="pwd"/>
                        </div>
                        <div class="col-md-4" style="width: 0%;left: 3%;">
                          <button class="btn green confirm" id="settlement-btn">确定</button>
                        </div>
                      </div>

                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-10 re2" style="background-color: white;width: 81%;margin-left: 2.3333%;border: 1px solid #ddd;padding: 0;display: none;min-height: 750px;position: absolute;left: 16%;top: 105px;">
            <div class="col-md-12 success">结算成功!</div>
            <div class="col-md-12" style="line-height: 40px;font-size: 14px">
              <div style="float: left">结算收据</div>
              <!--<div style="float: right">流水号:12323</div>-->
            </div>
            <div class="col-md-12">
              <table id="print-content2" border="1" width="100%"  cellpadding="0" cellspacing="0" style='border-collapse:collapse;table-layout:fixed;'>
                <tr height="45" style="text-align: center;font-size:14px">
                  <td colspan="2" class="on">账户名称</td>
                  <td colspan="10" id="comname"></td>
                </tr>
                <tr height="45" style="text-align: center;font-size:14px">
                  <td colspan="2" class="on">联系人</td>
                  <td colspan="2" id="linkman"></td>
                  <td colspan="2" class="on">结算时间</td>
                  <td colspan="2" id="time"></td>
                  <td colspan="2" class="on">结算人</td>
                  <td colspan="2" id="settlePerson"></td>
                </tr>
                <tr height="45" style="text-align: center;font-size:14px">
                  <td colspan="2" class="on">结算扣款金额(元)</td>
                  <td colspan="2" id="cost"></td>
                  <td colspan="2" class="on">结算前余额(元)</td>
                  <td colspan="2" id="beforesettle"></td>
                  <td colspan="2" class="on">结算后余额(元)</td>
                  <td colspan="2" id="aftersettle"></td>
                </tr>
              </table>
            </div>
            <div class="col-md-12" style="line-height: 100px;text-align: center" >
              <!--<div id="pgdn" class="btn green" style="width: 100px">返回</div>-->
              <div id="ad" class="btn green" style="width: 200px">完成</div>
              <a class="btn green" id="print-click" style="color: white;" onclick="exportTable();">导出Excel</a>
              <button class="btn green" onclick="printout()">打印回执</button>
            </div>
          </div>
        </div>
        <!-- Page Footer-->
        <jsp:include page="footer.jsp"></jsp:include>
      </div>
    </div>
  </div>
    <!-- JavaScript files-->
  <script>
    $("#settlement-menu").addClass('active');
  </script>
    <!-- Main File-->
  <!--   Core JS Files   -->
  <script src="${pageContext.request.contextPath}/base/plugins/layui-v2.4.3/layui/excel.js"></script>
  <script src="${pageContext.request.contextPath}/base/plugins/layui-v2.4.3/FileSaver.js"></script>
  <script src="${pageContext.request.contextPath}/base/plugins/layui-v2.4.3/jszip.js"></script>
  <script src="${pageContext.request.contextPath}/base/plugins/layui-v2.4.3/xlsx.js"></script>
  <script src="${pageContext.request.contextPath}/js/settlement.js"></script>
  </body>
</html>